<template>
  <div class="list">
    <el-card class="box-card">
      <template #header>
        <el-button type="primary" :icon="Plus" @click="handleAdd">增加</el-button>
        <el-button type="danger" :icon="Delete" @click="handleDelete">批量删除</el-button>
      </template>
      <div class="card-con">
        <el-table :data="state.tableData" style="width: 100%">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="name" label="分类名称">
          </el-table-column>
          <el-table-column prop="sortVal" label="排序值" width="120" align="center">
          </el-table-column>
          <el-table-column prop="time" label="添加时间" width="200" align="center">
          </el-table-column>
          <el-table-column prop="opt" label="操作" width="220" align="center">
            <!-- 定义默认插槽，并将作用域数据赋值给 scope 变量 -->
            <template #default="scope">
              <el-button type="warning" :icon="Edit" @click="mutateRow(scope)">修改</el-button>
              <el-button type="danger" :icon="Delete" @click="deleteRow(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { Plus, Delete, Edit } from '@element-plus/icons-vue'
  import { reactive, onMounted } from 'vue'
  import axios from 'axios';
  import { ElMessage } from 'element-plus'
  const state = reactive({
    currentPage: 0,
    pageSize: 10,
    loading: false,
    tableData: [],
    multipleSelection: [] // 选中的项
  })

  // 获取数据
  const getClassify = async () => {
    try {
      // 修改请求路径为实际接口路径
      const result = await axios.get('/api/categories', {
        params: {
          pageNumber: state.currentPage,
          pageSize: state.pageSize,
        }
      })
      state.tableData = result.data.data.list;
    } catch (error) {
      ElMessage.error('接口请求失败')
    }
  }

  onMounted(() => {
    getClassify()
  })
  // 增加
  function handleAdd() {
    console.log('增加')
  }

  // 批量删除
  function handleDelete() {

  }
  // 修改
  function mutateRow(scope) {
    console.log(scope.row);
  }

  // 删除单行
  function deleteRow(scope) {
    state.tableData = state.tableData.filter(item => item.id !== scope.row.id);
    // 发请求删除
  }

  // 总选择
  function handleSelectionChange(val) {
    state.multipleSelection = val;
  }
</script>

<style scoped>
  .list {
    height: calc(100% - 50px);
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 10px;
  }
</style>